<template>
  <div>
    <div class="search-container">
      <div class="search-label">一体杆名称：</div>
      <el-input
        v-model="params.poleName"
        clearable
        placeholder="请输入内容"
        class="search-main"
        @clear="clearSearch"
      />
      <div class="search-label">一体杆编号：</div>
      <el-input
        v-model="params.poleNumber"
        clearable
        placeholder="请输入内容"
        class="search-main"
        @clear="clearSearch"
      />
      <div class="search-label">运行状态：</div>
      <el-select v-model="params.handelStatus" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        class="search-button"
        type="primary"
        @click="doSearch"
      >查询</el-button>
    </div>

    <div class="table">
      <el-table style="width: 100%" :data="warningList">
        <el-table-column type="index" label="序号" prop="id" width="100" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus">
          <template #default="scope">
            {{ formatWarningType(scope.row.handleStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="警告时间" prop="warningTime" />

        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button size="mini" type="text" disabled>派单</el-button>
            <el-button size="mini" type="text" @click="getDatil(scope.row.id)">详情</el-button>
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import { getWarningListAPI, delWarningAPI } from '@/api/warning'
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: '未派单'
        },
        {
          value: 1,
          label: '已派单'
        },
        {
          value: 2,
          label: '已接单'
        },
        {
          value: 3,
          label: '已完成'
        }
      ],
      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        handelStatus: ''
      },
      warningList: []
    }
  },
  mounted() {
    this.getWarningList()
  },
  methods: {
    async getWarningList() {
      const res = await getWarningListAPI(this.params)
      console.log(res)
      this.warningList = res.data.rows
      console.log(this.warningList)
    },
    clearSearch() {
      this.getWarningList()
    },
    // 搜索
    doSearch() {
      this.params.page = 1
      this.getWarningList()
    },
    // 状态转化
    formatWarningType(chargetType) {
      const MAP = {
        0: '未派单',
        1: '已派单',
        2: '已接单',
        3: '已完成'
      }
      return MAP[chargetType]
    },
    // 查看详情
    getDatil(id) {
      this.$router.push({
        path: '/warningDatil',
        query: {
          id
        }
      })
    },
    // 删除
    async del(id) {
      this.$confirm('确认删除当前一体杆吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delWarningAPI(id)
        this.getWarningList()
      }).catch(() => {

      })
    }

  }
}
</script>
<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 25px;
  }
  .search-button {
    margin-left: 40px;
  }
}
.create-container {
  margin: 10px 0px;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
.form-container {
  padding: 0px 80px;
}
</style>
